<template>
  <KView class="sys-input">
    <KView class="sys-input-box" :class="{'has-icon':icon!==''}">
      <input v-model="text" :placeholder="placeholder" :disabled="disabled" @change="valueChange">
    </KView>
    <KView class="sys-input-icon" v-if="icon!==''">
      <sys-svg :name="icon" :color="iconColor"></sys-svg>
    </KView>
  </KView>
</template>

<script>
  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      value: {
        type: String,
        required: true
      },
      placeholder: String,
      icon: {
        type: String,
        default: ''
      },
      iconColor: {
        type: String,
        default: '#999999'
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },

    watch: {
      value() {
        if (this.inputText !== null) {
          this.inputText = null;
          return;
        }
        this.text = this.value;
      }
    },

    data() {
      return {
        text: this.value,
        inputText: null
      };
    },

    methods: {
      valueChange() {
        let text = this.text;
        this.inputText = text;
        this.$emit('input', text);
        this.$emit('change', text);
      }
    },

    components: {
      SysSvg
    }
  };

</script>

<style lang="scss">
  .sys-input {
    width: 100%;
    height: formatPx(90);
    border-radius: formatPx(45);
    position: relative;
    overflow: hidden;

    .sys-input-box {
      height: 100%;

      >input {
        height: 100%;
        width: 100%;
        border: none;
        font-size: formatPx(26);
        background: #f7f7f7;
        padding: 0 formatPx(40);
      }

      &.has-icon {
        >input {
          padding-left: formatPx(80);
        }
      }
    }

    .sys-input-icon {
      position: absolute;
      left: formatPx(36);
      top: 0;
      width: formatPx(30);
      height: 100%;
    }
  }

</style>
